<template>
  <div class="cardList">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">会员卡列表</x-header>
    <div class="topHolder"></div>
    <box gap="1rem 0.8rem">
      <div class="cList" v-for="(item,index) in memberCardList" :key="index">
        <x-button class="chargeBtn inlineBtn" v-if="false && paramType == 'cashCard'" type="default" @click.native="charge(item)" :show-loading="loadingStatus" :disabled="loadingStatus" text="充值"></x-button>
        <masker @click.native="goToDetail(item.MEMBERCARDUSER_ID)" :opacity="0.6">
          <div class="img" :style="{backgroundImage: 'url(' + contextPath + item.BACBGROUNDICON + ')'}"></div>
          <div slot="content">
            <h5 class="title">{{item.CARDNAME}}</h5>
            <div class="cardId" v-text="'卡号：' + item.CARDNUMBER"></div>
            <span class="balance" v-text="'余额：¥ ' + formatCurrency(item.BALANCE) + '元'"></span>
            <span class="detail">点击详情>></span>
          </div>
        </masker>
      </div>
      <div class="listNoItem" v-if="memberCardList.length <= 0">暂无会员卡</div>
    </box>
  </div>
</template>

<script>
  import { Box, Masker, XButton, numberComma } from 'vux'
  import {contextPath,getCardList} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'cardList',
    data(){
      return{
        contextPath:contextPath,
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:true,
        paramType:this.$route.params.type,
        memberCardList: []
      }
    },
    components:{
      Box,
      Masker,
      XButton
    },
    computed:{

    },
    methods:{
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      goToDetail(id){
        this.$router.push({name:'会员卡详情',params:{type:this.paramType,memberCardUserId:id}})
      },
      charge(item){
        this.$router.push({name:'会员卡充值',params:{memberCardUserId:item.MEMBERCARDUSER_ID,cardName:item.CARDNAME,cardNumber:item.CARDNUMBER,cardMinCharge:item.PRICE}})
      }
    },
    mounted(){
      getCardList(this.paramType).then((res)=>{
        if(res.status == 'success'){
          this.memberCardList = res.data
          this.loadingStatus = false
        }else if(res.status == 'error') {
          message({message:res.msg,type:'error'})
          console.log('getCardList error info:', res.msg)
        }
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getCardList catch info:',err)})
    }
  }
</script>

<style lang="scss" scoped>
  .cardList{
    .cList{
      margin: 1rem 0;color: #fff;position: relative;
      .chargeBtn{position: absolute;z-index:2;right: 0.8rem;top: 0.8rem;}
      .vux-masker-box{
        height: 12rem;position: relative;z-index:1;border-radius: 0.5rem;
        .img {display: block;position: relative;height:100%;width: 100%;background-size: cover;background-position: center center;cursor: pointer;border-radius: 0.5rem;}
        .title{font-size: 1rem;margin: 1.2rem 0 0 1rem;width:70%;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
        .cardId{margin:0.7rem 0 0 1rem;font-size: 0.8rem;}
        .balance{font-size: 0.8rem;position: absolute;right: 1rem;bottom: 0.8rem;color: #fcd800;}
        .detail{font-size: 0.8rem;position: absolute;bottom: 0.8rem;left: 1rem;}
      }
    }
  }
</style>
